<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        #change,#tb {margin:0;padding:0;}
        #change li{list-style-type:none;}
        #tb tr th a{text-decoration: none;color:darkred;}
        #change,#tb {width:500px;height:25px;margin:0 auto;clear:both;}
        
        
        #change li {float:left;margin:10px 10px 10px 0;width:5px;height:5px;border-width:5px;border-style: solid;}
        #red {border-color: red;background:red;}
        #green {border:green ;background:green;}
        #black {border:black;background:black;}
        #change li.current{background:#fff !important;}
        
        
        #tb {border-collapse:collapse;}
        #tb tr th {border:1px darkred solid;font-size:11px;}
        #tb tr th a:hover{text-decoration: underline;}
    </style>
</head>
<body id="bd">
    <ul id="change">
	    <li id="red" title="红色"></li>
        <li id="green" name="current" title="绿色"></li>
        <li id="black" title="黑色"></li>
    </ul>
    <table id="tb">
        <tr>
            <th><a href="#">新闻</a></th>
            <th><a href="#">娱乐</a></th>
            <th><a href="#">体育</a></th>
            <th><a href="#">电影</a></th>
            <th><a href="#">音乐</a></th>
            <th><a href="#">旅游</a></th>
        </tr>
    </table>
</body>
</html>

<script>
    function changeBg(elem,attr,value) {
            elem.style[attr]=value;
        }
		window.onload = function() {
            var oLi = document.getElementsByTagName("li");
            var oBd = document.getElementById("bd");
            var oTb = document.getElementById("tb");
            var oAtt = ["background"];
            /*背景色变化值*/
            var oBdBg = ["#ff0076","#718000","#cccccc"];
            var oTbBg = ["red","green","black"];
        
            /*背景切换功能*/
            for (var i=0;i<oLi.length;i++) {
                oLi[i].index = i;
                oLi[i].onclick = function () {
                    for(var x in oLi) oLi[x].className = "";
                    this.className = "current";
                    
                    if (this.index == oLi.length - 1){
                        changeBg(oBd,oAtt[0],oBdBg[2]);
                        changeBg(oTb,oAtt[0],oTbBg[2]);
                    }
                    else{
                        changeBg(oBd,oAtt[0],oBdBg[this.index]);
                        changeBg(oTb,oAtt[0],oTbBg[this.index]);
                    }
                }
            }                 
        }
</script>